/*----------------------------------------*\
  ALERT BANNER
\*----------------------------------------*/

.alert-banner {
  @apply text-white;

  p {
    @apply text--sm;
  }
}

.alert-banner__wrapper {
  @apply flex items-start relative;
  @apply container;
  @apply py-4 md:py-6 xl:py-8;
}

.alert-banner__grid {
  @apply grid grid-cols-1 gap-3;
  @apply md:grid md:grid-cols-3 md:gap-6;
  @apply lg:grid lg:grid-cols-4 lg:gap-8;
}

.alert-banner__header {
  @apply break-words;
  @apply md:col-span-4;
  @apply lg:col-span-1 lg:row-start-1;
}

.alert-banner__content {
  @apply break-words;
  @apply md:col-span-3 md:row-start-2;
  @apply lg:col-span-2 lg:row-start-1;
}

.alert-banner__list {
  @apply md:col-span-1 md:row-start-2;
  @apply lg:col-span-1 lg:row-start-1;
}

.alert-banner__link {
}

.alert-banner__close {
  @apply absolute top-0 right-0;

  svg {
    @apply w-8 h-8;
  }
}

.alert-banner--alert,
.alert-banner--error {
  @apply bg-red-900;
}

.alert-banner--info {
  @apply bg-blue-800;
}

.alert-banner--warning {
  @apply bg-orange-700;
}

.alert-banner--success {
  @apply bg-green-700;
}
